<template>
  <div class="app-container doc">
    <div class="hello">
      <p>YueRui Admin System - Development Framework</p>
      <p class="stage">#Stage 1</p>
    </div>

    <div class="card">
      <h2>Hi~{{ name }}</h2>
      <p>
        本框架为支持前后端协同开发而生，区别于常规的前后端分离模式。只为让后端开发者能够以尽可能低的学习成本，也可以快速独立的进行一些前端基础功能的开发。目前框架处于<strong>#Stage 1</strong>，只提供基础的开发示例，<strong>#Stage 2</strong>会提供面向开发的[配置模式]，即只需通过简单配置，即可快速自动生成代码，完成基础功能开发。但这区别于主流的低代码模式，它更轻，也更加易用。
      </p>
      <h4>开发原则</h4>
      <p>
        <ul>
          <li>开发前认证阅读[开发指南]等相关文档</li>
          <li>遵守相关开发指引建议和基础规范，以组件规范</li>
          <li>只需关注单一功能模块，凡涉及<strong>公共依赖、基础功能、组件等框架层调整，勿自行修改</strong></li>
        </ul>
      </p>
      <h4>技术支持</h4>
      <p>
        请联系<span style="color: red;">@Ryan</span>提供相关支持(欢迎骚扰)。
      </p>
    </div>

    <div class="card">
      <h2>开发者模式</h2>
      <p>
        目前内置的默认权限为[Develop]，此权限下将自动开启[开发者模式]，可以使用和开发相关的功能，比如菜单[开发指南]和[组件功能]、[错误日志]功能等，可查看系统所支持的功能和提供的公共组件。
      </p>
    </div>

    <div class="card">
      <h2>文档指引</h2>
      <p>项目基于Vue + Element UI，如需详细文档，请前往官方查看。</p>
      <div class="links">
        <a href="https://www.kdocs.cn/l/ccb7dG6Jwkzx" target="_blank">接口&鉴权</a>
        <a
          href="https://element.eleme.io/#/zh-CN/component/installation"
          target="_blank"
        >Element UI 2.13.2</a>
        <a href="https://cn.vuejs.org/" target="_blank">Vue 2.6.10</a>
      </div>
    </div>

    <div class="card">
      <h2>开发示例</h2>
      <p>
        菜单[开发示例]下，分别有常见的[增/删/改/查]功能的完整示例和说明，可基于此快速构建功能。
      </p>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'DevelopIntroduction',
  computed: {
    ...mapGetters(['name'])
  },
  mounted() {
    const notify = this.$notify({
      title: 'Tips',
      message: '已开启开发者模式',
      offset: 100,
      onClick: () => {
        notify.close()
      }
    })

    setTimeout(() => {
      notify && notify.close()
    }, 3000)
  }
}
</script>

<style lang="scss" scoped>
.doc {
  color: #333;
  .hello {
    font-size: 30px;
    font-weight: bold;
    line-height: 46px;
    color: #fff;
    background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
    padding: 16px 20px;
    p {
      margin: 0;
    }
    .stage {
      font-size: 24px;
    }
  }
  .card {
    padding: 30px;
    margin-top: 40px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    h2 {
      padding-bottom: 20px;
    }
    h4 {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .links {
      display: flex;
      a {
        min-width: 130px;
        flex-shrink: 0;
        display: block;
        cursor: pointer;
        background: #333;
        color: #fff;
        height: 60px;
        padding: 0 16px;
        margin: 16px;
        line-height: 60px;
        font-size: 20px;
        text-align: center;
      }
    }
  }
}
</style>
